<template>
		
 <view class="">
 	
   <!-- 底部播放 -->
	<view class="footer"  v-show="isPlayMusic" >
		<view  class="leftImg">
			<image @click="tabsPlay"  :src="url" >
			</image>
		</view>
		<view class="title">
			<text>{{title}}</text>
			<text class="descride">{{desc}}</text>
		</view>
		<view class="right">
			<view class="pause">
				<image src="../../img/Playerpause.png" mode="" v-show="audioFlag" @click="stop"></image>
				<image src="../../img/Playerplay.png" mode="" v-show="!audioFlag" @click="kaiqi"></image>
			</view>
			<view class="lie">
				<image src="../../img/yinleliebiao.png" mode="" @click.stop="listClick"></image>
			</view>
		</view>
		<view class="list" v-show="flag">
			<view class="li" v-for="(item,index) in list" :key="item.id" @click="playAudio(item.id,item.name,item.al.picUrl)">
				<text>{{item.name}}</text>
				<image src="../../img/shanchu.png"></image>
			</view>
		</view>
	</view>
	
	<!-- 音乐播放器 -->
	
	
	<!-- 音乐的展示页面 -->
	<view class="content"  v-show="!isPlayMusic">
		<!-- 图片 -->
		<view class="content">
			<view class="status-bar"></view>
			<!-- header -->
			<view class="player-header">
				<text class="player-header-icon text-white cuIcon-back" ></text>
				<view class="player-header-title">
					<view class="title-name">
						{{title}}
					</view>
					<view class="title-msg">
						{{desc}}
					</view>
				</view>
				<text class="player-header-share text-white cuIcon-share"></text>
			</view>
			<!-- videodisc -->
			<view class="player-videodisc">
				<image @click="isPlayMusic = true" class="rotateImg" :src="url" mode=""></image>
				<view class="player-header-title">
					<view class="title-msg">
						{{desc}}
					</view>
				</view>
			</view>
			<!-- optBar -->
			<view class="play-opt-bar">
				<view class="" v-for="(item, index) in optList" :key="index">
					<text class="text-white" :class="item.icon"></text>
				</view>
			</view>
			<!-- slider -->
			<view class="player-slider">
				<!-- playbar -->
				<playMuiscComs :lyric="lyric.geci"  @swidthStop='swidthStop' :stopPlay="audioFlag" :Playflag="Playflag" default='#169af3'  continue :src="Playflag" :duration="audio[now].duration" @prev="prev"
				 @next="next">
				 </playMuiscComs>
			</view>
		</view>
	</view>
	
	 </view>
	
</template>

<script>
	// http://music.163.com/song/media/outer/url?id=190072.mp3
	// src: String, //音频链接
	// autoplay: Boolean, //是否自动播放
	// looping: Boolean, //是否循环播放
	// continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
	// control: {
	// 	type: Boolean,
	// 	default: true
	// }, //是否需要上一曲/下一曲按钮
	// color: {
	// 	type: String,
	// 	default: '#169af3'
	// } //主色调
	// import {SingerHot} from '../../api/singer.js'
	import playMuiscComs from '../playMuiscComs/playMuiscComs.vue'
	// import {getMusicM3} from '@/api/index.js'
	
	/*
	  传过来当前所有数据的列表
	  传过来当前的进度
	  传过来当前播放音乐的下标，因为切换下一首要下标加一
	  
	*/ 
	
	/*
	  卡片参数
	     @ img           音乐图片  
		 @ nameValue     名称
		 @ describe      描述
	*/
	import {
		getMpthree
	} from '@/api/music.js';
	import{ getlyric } from  '@/api/index.js'
	export default {
		name: "musicTabbar",
		props: {
			title: {
				type: String,
				default: "名称"
			},
			desc: {
				type: String,
				default: "描述"
			},
			flag: {
				type: Boolean,
				default: false
			},
			url: {
				type: String
			},
			list: {
				type: Array,
				default: () => []
			},
			mp3: {
				type: String
			},
			play: {
				type: Boolean,
				default: false
			},
			listIndex: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				
                audioFlag: false,
				name: '',
				myMp3: this.mp3,
				// 是否显示播放音乐
				isPlayMusic:true,
				
				// 音乐播放是否
				Playflag:'',
				
				musicData:[],
				id:0,
				// list:{},
				optList:[{
							'id': 0,
							'icon': 'cuIcon-like'
						},{
							'id': 1,
							'icon': 'cuIcon-down'
						},{
							'id': 2,
							'icon': 'cuIcon-notice'
						},{
							'id': 3,
							'icon': 'cuIcon-message'
						},{
							'id': 4,
							'icon': 'cuIcon-moreandroid'
						},
					],
					ifPlay: false,
				lyric: {
					id: 1,
					title: '1.Catch the Moment刀剑神域 序列之争',
					geci: [],
					isShow: true,
				},
				now:0,
				audio: [	
					'http://m801.music.126.net/20220405192635/a17ae87f183730900ab24f14c4440a2c/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/11353262648/a304/78bb/3d4d/cea1ff6539f885a031d5aa2f64722f7c.mp3'
				],
				autoplay:true,
				palayIndex:0
			};
		},
		watch:{
			mp3(val){
				// 开启
				this.audioFlag = true;
			
				this.Playflag = val
			},
			palayIndex(val){
				let item = this.list[val]
				console.log(this.list[val]);
		
				getMpthree(item.id).then(res => {
					this.$emit('toMp3',{mp3:res.data.data[0].url,title:item.name,img:item.al.picUrl});
				})	
				this.getlyricFn(item.id)
			},
		
			listIndex:{
				handler(val){
					this.palayIndex = val
				},
				immediate:true
			}
			
	
		},
	
		mounted() {
			this.name = this.title;
		},
			
		methods: {
			// 处理歌词的逻辑
			getlyricFn(id){
				// 获取歌词
				getlyric(id).then(res=>{
					this.lyric.geci = res.data.lrc.lyric.split('\n')
				})	
				console.log(id);
			},
			
			swidthStop(flag){
				this.audioFlag = flag
			},
			tabsPlay(){
				console.log(2);
				this.isPlayMusic = false
			},
			prev(){
				
				this.palayIndex = this.palayIndex === 0?this.list.length-1:this.palayIndex-1
				wx.showToast({
					title:'上一首的切换'
				})
			},
			// 播放下一首
			next(){
				 this.palayIndex = this.palayIndex === this.list.length-1?0:this.palayIndex+1
				 wx.showToast({
				 	title:'下一首的切换'
				 })
			},
			listClick() {
				this.$emit("listTrue")
			},
			kaiqi() {
				this.audio[0] = this.mp3

				this.Playflag = this.mp3
				// 音乐的状态切换
				this.audioFlag = !this.audioFlag;
				
			},
			// 停止音乐
			stop() {
				this.audioFlag = !this.audioFlag;
			},
			playAudio(id,val,img) {
				console.log(this.list[this.listIndex].id);
				 getMpthree(id).then(res => {
					this.$emit('toMp3',{mp3:res.data.data[0].url,title:val,img:img});
				 })
				 console.log(id);
				 
				 getlyric(id).then(res=>{
				 	console.log(res.data.lrc);
					this.lyric[0].geci = res.data.lrc.lyric
					console.log(this.name[0].geci);
				 })	
				 
				
			},
		},
		components:{
			playMuiscComs
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		width: 100%;
		position: fixed !important;
		left: 0;
		bottom: 0;
		z-index: 99;
		background-color: #f5f5f5;
		height: 120rpx;
		display: flex;
		align-items: center;
		position: relative;

		.leftImg {
			width: 140rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			>image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				transition: all 0.5s;
				animation: rotate 6s linear infinite;
			}
			@keyframes rotate{
				0%{
					transform: rotateZ(0deg);/*从0度开始*/
				}
				100%{
					transform: rotateZ(360deg);/*360度结束*/
				}
			}

			.activeImg {
				transform: scale(1.5);
			}
		}

		.title {
			width: 400rpx;
			height: 120rpx;
			box-sizing: border-box;
			padding: 0 14rpx;
			display: flex;
			align-content: space-around;
			flex-wrap: wrap;

			>text {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				&:nth-of-type(1) {
					font-size: 28rpx;
				}

				&:nth-of-type(2) {
					font-size: 22rpx;
					color: #666;
				}
			}
		}

		.right {
			width: 210rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.pause,
			.lie {
				width: 100rpx;
				height: 100rpx;

				>image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.list {
			height: 900rpx;
			width: 750rpx;
			border-top: 1px solid #666;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			border-radius: 50rpx 50rpx 0 0;
			overflow-y: auto;

			.li {
				padding: 30rpx;
				display: flex;
				align-items: center;

				text {
					margin-right: 20rpx;
					color: #8b6769;
					font-size: 28rpx;
				}

				>image {
					width: 30rpx;
					height: 30rpx;
					margin-left: auto;
				}

			}
		}
	}
	
	// 音乐播放的样式
	
	
	.text-center{
		padding: 10rpx;
		font-size: 30rpx;
	}
	.aa{
		 width: 100%;
		 height: 200px;
		 background-size: 100% 100%;
	}
	.rotateImg{
		border-radius: 100%;
	}
		/* 动画 */
	.rotateImg{  
	    display: block;
	    animation: rotate 6s linear infinite;
	}  
	@keyframes rotate{
		0%{
			transform: rotateZ(0deg);/*从0度开始*/
		}
		100%{
			transform: rotateZ(360deg);/*360度结束*/
		}
	}
	.content{
		position:fixed ;
        top: 0;
		left: 0;
		width: 100vw;
		background-image: linear-gradient(to bottom,#1e6997, #af946a, #1e6997);
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}
	.status-bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.player-header{
		width: 100%;
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #FFFFFF;
	}
	.player-header-icon{
		width: 54upx;
		font-size: 26px;
		margin-left: 25upx;
	}
	.player-header-share{
		width: 54upx;
		font-size: 26px;
		margin-right: 25upx;
	}
	.player-header-title{
		height: 100%;
		flex: 1;
		padding: 0 40upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.player-header-title .title-name{
		font-size: 18px;
	}
	.player-header-title .title-msg{
		font-size: 12px;
		color: #d0d0d0;
	}
	.player-videodisc{
		width: 420rpx;
		height: 620rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.player-videodisc image{
		width: 100%;
		height: 70%;
		margin-top: 70rpx;
		margin-bottom: 45rpx;
	}
	.play-opt-bar{
		width: 100%;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70upx;
		font-size: 34px;
		position: absolute;
		bottom: 320upx;
	}
	.player-slider{
		width: 650upx;
		height: 50upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 220upx;
	}
	.player-slider .player-currentTime,
	.player-slider .player-duration{
		width: 20upx;
		height: 100%;
		font-size: 10px;
		color: #c1c1c1;
		line-height: 44upx;
	}
	
	.play-bar{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70upx;
		font-size: 30px;
		position: absolute;
		bottom: 80upx;
	}
	.play-menu{
		width: 100upx;
		height: 100upx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
		text-align: center;
		line-height: 100upx;
	}
</style>
